import React, { useState,useEffect } from 'react';
import { Modal, Button,Form,Input,Radio } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
// import ModalForm from './modalForm';
const mapStateToProps = state => {
  return {
  user: state.user,
  unitList: state.adminPage.unitList,
}}

const mapDispatchToProps = dispatch => {
    return {
      getUnitList: dispatch.adminPage.getUnitList,
      addMember: dispatch.adminPage.addMember,
      deleteMember:  dispatch.adminPage.deleteMember,
      editMember: dispatch.adminPage.editMember,
    }
};
const Edit = (props) => {
  useEffect(() => {
    props.getUnitList()
  }, []);
  
    const [visible,setVisible] = useState(false);
    const [value,setValue] = useState('1');
    const record = props.record;
    // const [confirmLoading,setConfirmLoading] = useState(false);
    // const [modalText,setModalText] = useState('Content of the modal');

    

    const onFinish = (values) => {
      props.editMember(values)
      console.log(values);
    };
    const showModal = () => {
        setVisible(true);
    }
    const handleOk = () => {
        // setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            // setConfirmLoading(false);
        }, 200);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    }
    const limitsOnChange = e => {
        // console.log('Radio Checked');
        // console.log(e.target.value)
        setValue(e.target.value);
    };
    // const onFinish = this.props.
    return (
    <>
      <Button type="text" onClick={showModal}>
        编辑
      </Button>
      <Modal
        title="编辑用户"
        visible={visible}
        // onOk={handleOk}
        // confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={[
            
        ]}
      >
        <Form 
          onFinish={onFinish}
          labelCol={{span:6}}
          wrapperCol={{span:16, offset:1}}
          // initialValues={record}
        >
            <Form.Item
              label="用户名"
              name="username"
              initialValue={record.username}
            >
                <Input disabled />
            </Form.Item>
            <Form.Item
              label="用户地址"
              name="address"
              initialValue={record.address}
            >
                <Input disabled />
            </Form.Item>
            <Form.Item
              label="管理人员"
              name="name"
              initialValue={record.name}
            >
                <Input disabled  />
            </Form.Item>
            <Form.Item
              label="权限"
              name="role"
              initialValue={record.role}
            >
                <Input disabled /> 
            </Form.Item>
            { props.user.role === '单位管理员' ?
              (
                <Form.Item
                  label="单位ID"
                  name="unitId"
                  initialValue={props.user.unitId}
                  // rules={[{required:true}]}
                >
                    <Input disabled placeholder="输入单位名" />
                </Form.Item>
              ) :
              (
                <Form.Item
                  label="单位ID"
                  name="unitId"
                  // rules={[{required:true}]}
                  initialValue={props.unitList.find((item) => {
                    return item.name == record.unitName
                  }).unitId}
                >
                    {/* <Radio.Group onChange={unitChange} value={unit}>
                      {props.unitList.map(item => {
                        return (<Radio value={item.unitId}>{item.name}</Radio>)
                      })}
                    </Radio.Group> */}
                    <Input disabled />
                </Form.Item>
              )
            }
            <Form.Item
              label="新密码"
              name="newPassword"
              rules={[{required:true,message:'请输入新密码'}]}
            >
              <Input />
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" type="primary"  onClick={handleOk}>修改</Button>
            </Form.Item>
        </Form>
      </Modal>
    </>
  )
} 
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(Edit))
